<script setup lang="ts" name="TallyDirectForm">
import { onMounted, reactive, ref, watch } from "vue";
import SelectPackageType from "@/components/SelectInfo/SelectPackageType.vue";
import { useBillInfo } from "@/store/bill-info";
import { useEditOstInfo } from "@/store/edit-ost-info";
import BigNumber from "bignumber.js";
import { showFailToast } from "vant";
import { isNumeric } from "vant/es/utils";
import type { PackageTypeData } from "@/utils/interface";


const billInfo = ref({} as any);
const emit = defineEmits(["result"]);

const perTon = ref(0);

const formData = reactive({
  tallyTon: "",
  tallyPiece: "",
  tallyPackageType: "",
  tallyPackageTypeName: "",
  storageAreaId: "1",
  storageAreaName: "直接作业区域",
  storagePositionId: "1",
  storagePositionName: "直接作业货场",
  spot: "直接作业货位"
});

const planPieceTon = ref("");
const storagePieceTon = ref("");
const billInfoStore = useBillInfo();
const editOstInfoStorage = useEditOstInfo();

const validator = (val: any) => isNumeric(val);
const showSelectPackageTypePopup = ref(false);

onMounted(() => {
  init();
});
billInfoStore.$subscribe(() => {
  init();
});
function init() {
  billInfo.value = billInfoStore.billInfo;
  planPieceTon.value = billInfo.value?.piece + "/" + billInfo.value?.ton;
  storagePieceTon.value =
    billInfo.value?.storagePiece + "/" + billInfo.value?.storageTon;
  if (billInfo.value.piece !== 0) {
    const ton = new BigNumber(billInfo.value.ton);
    const piece = new BigNumber(billInfo.value.piece);
    perTon.value = ton.div(piece).toNumber();
  }
}
// 返回表单结果
watch(
  () => formData,
  newValue => {
    emit("result", newValue);
  },
  { immediate: true, deep: true }
);
// 填写件数算吨数
function setPerTon() {
  billInfo.value = billInfoStore.billInfo;
  if (billInfo.value.transportBillId && billInfo.value.piece !== 0) {
    const ton = new BigNumber(billInfo.value.ton);
    const piece = new BigNumber(billInfo.value.piece);
    perTon.value = ton.div(piece).toNumber();
  }
}
function setTon() {
  setPerTon();
  if (formData.tallyPiece && perTon.value) {
    formData.tallyTon = new BigNumber(formData.tallyPiece as string)
      .times(perTon.value)
      .toString();
  }
}
// 编辑时初始化
watch(
  () => editOstInfoStorage.editOstInfo,
  newValue => {
    formData.tallyTon = newValue.tallyTon;
    formData.tallyPiece = newValue.tallyPiece;
    formData.tallyPackageType = newValue.tallyPackageType;
    formData.tallyPackageTypeName = newValue.tallyPackageTypeName;
  },
  { immediate: true }
);

const isSelectPackageTypeOpen = (value: boolean) => {
  showSelectPackageTypePopup.value = value;
};
const selectedPackageType = (value: PackageTypeData) => {
  formData.tallyPackageType = "";
  formData.tallyPackageTypeName = "";
  formData.tallyPackageType = value.customsPackageCode;
  formData.tallyPackageTypeName = value.packInfo;
};
const validate = () => {};
const onFailed = (value: any) => {
  showFailToast("请检查表单");
};
</script>

<template>
  <div
    id="tallyDirectForm"
    class="w-full flex flex-col bg-white py-[10px] px-[15px] rounded-lg mt-3"
  >
    <div class="w h-[40px] flex justify-between">
      <div class="flex h w items-center font-bold">直接作业</div>
    </div>
    <form @submit="validate" @failed="onFailed">
      <van-cell-group :border="false">
        <van-field
          readonly
          v-model="planPieceTon"
          name="planPieceTon"
          label="计划件吨"
        />
        <van-field
          readonly
          v-model="storagePieceTon"
          name="storagePieceTon"
          label="库存件吨"
        />
        <van-field
          readonly
          name="tallyPackageType"
          label="包装"
          is-link
          placeholder="请选择包装"
          v-model="formData.tallyPackageTypeName"
          @click="showSelectPackageTypePopup = true"
          :rules="[{ required: true, message: '请选择包装' }]"
        >
          <template #label>
            包装<span class="xing">*</span>
          </template>
        </van-field>
        <van-popup
          v-model:show="showSelectPackageTypePopup"
          position="bottom"
          round
          duration="0"
          :style="{ height: 'auto' }"
        >
          <SelectPackageType
            @isOpen="isSelectPackageTypeOpen"
            @selectedPackageType="selectedPackageType"
          ></SelectPackageType>
        </van-popup>
        <van-field
          name="piece"
          v-model="formData.tallyPiece"
          label="理货件数"
          placeholder="请输入件数"
          :rules="[{ validator, message: '请输入件数' }]"
        >
          <template #label>
            理货件数<span class="xing">*</span>
          </template>
        </van-field>
        <van-field
          name="ton"
          v-model="formData.tallyTon"
          @focus="setTon"
          label="理货吨数"
          placeholder="请输入吨数"
          :border="false"
          :rules="[{ validator, message: '请输入吨数' }]"
        >
          <template #label>
            理货吨数<span class="xing">*</span>
          </template>
        </van-field>
      </van-cell-group>
    </form>
  </div>
</template>

<style scoped>
.header {
  background: linear-gradient(144deg, rgba(64, 169, 255, 1) 6%, #f7f8fa 6%);
}
</style>
